<script>
import request from "@/utils/request";
import $ from "jquery";
import * as utils from "@/views/bi/portal/Utils";
import { Loading } from "element-ui";

export default {
  components: {},
  data() {
    return {
      data: null,
    };
  },
  props: {
    comp: {
      type: Object,
      required: true,
      default: {},
    },
    editor: {
      type: Boolean,
      required: true,
      default: true,
    },
    portalParams: {
      type: Array,
      required: false,
    },
  },
  render(h) {
    let comp = this.comp;
    let data = this.data;
    if (data) {
      let ths = [];
      data.header.forEach((element) => {
        ths.push(
          h("th", { class: "grid3-td" }, [
            h("div", { class: "dg-cell" }, element.desc),
          ])
        );
      });
      let table1 = h("table", { class: "lockgrid" }, [
        h("thead", [h("tr", ths)]),
      ]);

      let trs = [];
      if (data.datas) {
        data.datas.forEach((e, idx) => {
          let tds = [];
          $(data.header).each((c, d) => {
            let hd = d;
            let nd = e[d.name];
            tds.push(
              h(
                "td",
                {
                  class: "lockgrid-td",
                  attrs: { align: hd.align ? hd.align : "center" },
                },
                [h("div", { class: "dg-cell" }, nd.value)]
              )
            );
          });
          trs.push(h("tr", tds));
        });
      } else {
        trs = [
          h(
            "tr",
            { attrs: { colspan: data.header.length, align: "center" } },
            "无数据"
          ),
        ];
      }
      let table2 = h("table", { class: "lockgrid" }, [h("thead", trs)]);

      //分页信息
      let allpage = 0;
      if (data.total % data.pageSize === 0) {
        allpage = data.total / data.pageSize;
      } else {
        allpage = Math.floor(data.total / data.pageSize) + 1;
      }
      let first = data.curPage <= 0;
      let end = data.curPage >= allpage - 1;
      let pg = [
        h("button", {
          class: "btn btn-link btn-xs",
          attrs: { disabled: first },
          on: {
            click: () => {
              if (!first) {
                this.comp.curPage = 0;
                if (this.editor === true) {
                  this.gridView();
                } else {
                  this.fy();
                }
              }
            },
          },
          domProps: { innerHTML: "<i class='fa fa-angle-double-left'></i>" },
        }),
        h("button", {
          class: "btn btn-link btn-xs",
          on: {
            click: () => {
              if (!first) {
                this.comp.curPage = data.curPage - 1;
                if (this.editor === true) {
                  this.gridView();
                } else {
                  this.fy();
                }
              }
            },
          },
          attrs: { disabled: first },
          domProps: { innerHTML: "<i class='fa fa-angle-left'></i>" },
        }),
        h("button", {
          class: "btn btn-link btn-xs",
          attrs: { disabled: end },
          on: {
            click: () => {
              if (!end) {
                this.comp.curPage = data.curPage + 1;
                if (this.editor === true) {
                  this.gridView();
                } else {
                  this.fy();
                }
              }
            },
          },
          domProps: { innerHTML: "<i class='fa fa-angle-right'></i>" },
        }),
        h("button", {
          class: "btn btn-link btn-xs",
          attrs: { disabled: end },
          on: {
            click: () => {
              if (!end) {
                this.comp.curPage = allpage - 1;
                if (this.editor === true) {
                  this.gridView();
                } else {
                  this.fy();
                }
              }
            },
          },
          domProps: { innerHTML: "<i class='fa fa-angle-double-right'></i>" },
        }),
      ];

      let pageinfo = h("div", { class: "pagesizeinfo" }, [
        h("div", { class: "pagesizeLeft" }, pg),
        h(
          "div",
          { class: "pagesizeRight" },
          "第" + (data.curPage + 1) + "页，共" + data.total + "条记录"
        ),
      ]);
      let bodysyl = { overflow: "auto" };
      if (comp.height) {
        let height = comp.height;
        height = height - 28; //组件高度减去 head 的高度
        if (!(comp.isnotfy == true)) {
          //分页
          height = height - 30; //减去分页高度
        }
        bodysyl.height = height + "px";
      } else {
        bodysyl.height = "220px";
      }

      let cld = [
        h("div", { class: "lock-dg-header" }, [table1]),
        h(
          "div",
          {
            class: "lock-dg-body",
            style: bodysyl,
          },
          [table2]
        ),
      ];
      if (!(this.comp.isnotfy === true)) {
        cld.push(pageinfo);
      }
      return h("div", { class: "lock-dg", attrs: { id: comp.id } }, cld);
    }
    if (this.editor === true) {
      return h("div", {
        attrs: { align: "center", class: "tipinfo" },
        domProps: {
          innerHTML:
            '(点击<i class="fa fa-wrench"></i>按钮配置' +
            utils.getCompTypeDesc(comp.type) +
            ")",
        },
      });
    } else {
      return h("div", "数据加载中...");
    }
  },
  mounted() {
    if (this.editor === true) {
      this.gridView();
    }
  },
  computed: {},
  methods: {
    bindScrollEvent() {
      let comp = this.comp;
      //注册table的scroll事件
      $("#" + comp.id + " .lock-dg-body")
        .unbind("scroll")
        .bind("scroll", function () {
          var left = $(this).scrollLeft();
          $("#" + comp.id + " .lock-dg-header").css(
            "margin-left",
            "-" + left + "px"
          );
        });
    },
    //查看模式，分页方法
    fy() {
      let dt = {};
      let reportId = this.$parent.pageInfo.id;
      dt["serviceid"] = "ext.sys.fenye.ajax";
      dt["t_from_id"] = "mv_" + reportId;
      dt["currPage"] = this.comp.curPage;
      dt["id"] = this.comp.id;
      dt["pageSize"] = this.comp.pageSize;

      let loadingInstance = Loading.service({
        fullscreen: false,
        target: document.querySelector("#c_" + this.comp.id + " div.ccctx"),
      });
      ajax(
        {
          url: "control/extControl",
          data: dt,
          type: "POST",
          success: (resp) => {
            //重新渲染表格
            this.data = resp.rows;
          },
        },
        this,
        loadingInstance
      );
    },
    gridView() {
      let ts = this;
      let comp = this.comp;
      comp = JSON.parse(JSON.stringify(comp));
      comp.portalParams = ts.portalParams;
      if (comp.cols && comp.cols.length > 0) {
        let json = JSON.parse(JSON.stringify(comp));
        let loadingInstance = Loading.service({
          fullscreen: false,
          target: document.querySelector("#c_" + comp.id + " div.ccctx"),
        });
        request({
          headers: { "Content-Type": "application/json" },
          url: "/bi/portal/gridView",
          method: "POST",
          data: json,
        }).then((resp) => {
          ts.data = resp.rows;
          loadingInstance.close();
          ts.$nextTick(() => ts.bindScrollEvent());
        });
      }
    },
  },
  watch: {},
};
</script>
<style scoped>
TABLE.grid3 {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
TABLE.grid3 TH {
  text-align: center;
  border: 1px solid #cacaca;
  font-size: 13px;
  height: 26px;
  background-color: #eeeeee;
  font-weight: normal;
  word-wrap: break-word;
}
TABLE.grid3 TD.grid3-td,
TABLE.grid3 TD.grid3-foot {
  border: 1px solid #cacaca;
  padding: 3px 2px 3px 2px;
  font-size: 12px;
  height: 20px;
  word-wrap: break-word;
}
TABLE.lockgrid th.grid3-cross-kpi {
  text-align: right;
}
TABLE.grid3 tr:hover {
  background-color: #ffffd2;
}

TABLE.grid3 TR.link-selected {
  background-color: #efefef;
}

TABLE.grid3 TR.row-link {
  cursor: pointer;
}

TABLE.grid3 TR.row-embed {
  background-color: #ffffff !important;
}
.pagesizeinfo {
  padding: 3px;
  clear: both;
}
.pagesizeinfo .pagesizeLeft {
  float: left;
}
.pagesizeinfo .pagesizeRight {
  text-align: right;
  padding: 3px;
}
TABLE.lockgrid {
  border-collapse: collapse;
  table-layout: fixed;
}
TABLE.lockgrid TH {
  text-align: center;
  padding: 2px;
  font-size: 13px;
  height: 26px;
  white-space: nowrap;
}
TABLE.lockgrid TD.pms {
  color: rgb(255, 0, 0);
  font-weight: bold;
}
TABLE.lockgrid th.crossHead0,
TABLE.lockgrid th.crossHead1,
TABLE.lockgrid th.crossHead2 {
  text-align: center;
}
TABLE.lockgrid TD.lockgrid-td,
TD.grid3-foot {
  padding: 8px 2px 8px 2px;
  font-size: 12px;
  line-height: 1.42857;
}
TABLE.lockgrid div.dg-cell {
  width: 90px;
  overflow: hidden;
}
TABLE.table-body-def TD.lockgrid-td,
TD.grid3-foot {
  border-bottom: 1px solid #dddddd;
}
TABLE.bigscreen tr:hover {
  background-color: #e4e4e4;
}
TABLE.bigscreen tr:hover td,
TABLE.bigscreen tr:hover th,
TABLE.bigscreen tr:hover td a {
  color: #181818;
}
TABLE.bigscreen td a {
  color: #e4e4e4;
}
TABLE.table-body-def tr:hover {
  background-color: #ffffd2;
}
.lock-dg {
  overflow: hidden;
}
.lock-dg div.bigscreen {
  background-color: #f5f5f6;
}
.lock-dg div.table-hd-def {
  background-color: #f5f5f6;
  overflow: hidden;
}
.lock-dg .lock-dg-body {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.lock-dg .lock-dg-body:hover {
  overflow-x: auto;
}
.crossDirll-level {
  float: left;
}
.lock-dg-header {
  background-color: #f5f5f6;
}
</style>
